<script setup lang="ts">
import { ref } from 'vue'
import { EIGHTEEN_HELL } from '../../auth/auth.config'
const list = ref(EIGHTEEN_HELL)
</script>

<template>
    <div class="infernal-work">
        <div class="infernal-work-left">
            <div class="title" id="#anchor1">地狱简介</div>
            <div class="content">十八层地狱，或称十八地狱、十八重地狱、十八泥犁等，是中国神话中的地狱名称。传说是用于惩罚各种鬼怪的阴间场所，环境恐怖阴森，比人间处刑犯人的监狱还要可怕万分，根据鬼魂生前所犯的罪状而接受不同程度的刑法，有下油锅、刀山火海、抽打折磨等。阎王为地狱之首，属下的十八位判官分别主管十八层地狱</div>
            <div class="content">十八层地狱最早来源于佛教的说法，佛教中所指的“十八层”地狱，并不是指地狱的一层层直到第十八层，地狱是不分层次的，而是按时间、受苦程度、区域大小来形容的，只不过世人误解而已，永不超生的地狱统称无间地狱，意指受苦无有间断，一秒都不能休息，永生受苦。</div>
            <div class="content">当中列出的十八层地狱均为梵文音译，分别是：光就居、居虚倅略、桑居都、楼、房卒、草乌卑次、都卢难旦、不卢半呼、乌竟都、泥卢都、乌略、乌满、乌藉、乌呼、须健居、末都干直呼、区通途、陈莫。</div>
            <div class="content">《十八泥犁经》的十八层地狱，是以受罪时间的长短与罪刑等级轻重而排列。每一地狱比前一地狱，增苦二十倍，增寿一倍。当中列出的十八层地狱均为梵文音译，分别是：光就居、居虚倅略、桑居都、楼、房卒、草乌卑次、都卢难旦、不卢半呼、乌竟都、泥卢都、乌略、乌满、乌藉、乌呼、须健居、末都干直呼、区通途、陈莫。十八层地狱的“层”不是指空间的上下，而是在于时间和刑法上不同，尤其在时间之上。其第一狱以人间3750年为一日，30日为一月，12月为一年，罪鬼须于此狱服刑一万年（即人间135亿年）。其第二狱以人间7500年为一日，罪鬼须于此狱服刑须经两万年（即人间540亿年）。其后各狱之刑期，均以前一狱之刑期为基数递增两番。</div>
            <div class="imgs">
                <el-image src="/src/assets/diyu-01.jpg" style="display: inline-block;"></el-image>
                <el-image src="/src/assets/diyu-02.jpg" style="display: inline-block;"></el-image>
            </div>
            <div class="title" id="#anchor2">十八层地狱</div>
            <div class="table">
                <el-table :data="list" style="width: 100%" size="large" border>
                    <el-table-column prop="level" label="层数" align="center" width="300" />
                    <el-table-column prop="name" label="名称" align="center" width="300" />
                    <el-table-column prop="introduct" label="简介" align="center" />
                </el-table>
            </div>
            <div class="title" id="#anchor3">地狱刑期表</div>
            <div class="table">
                <el-table :data="list" style="width: 100%" size="large" border>
                    <el-table-column prop="level" label="层数" align="center" />
                    <el-table-column prop="placeName" label="地点" align="center" />
                    <el-table-column prop="termYear" label="刑期年数" align="center" />
                    <el-table-column prop="personYear" label="日均换算人间年数" align="center" />
                    <el-table-column prop="allYear" label="总刑期(人间年数)" align="center" />
                    <el-table-column prop="pain" label="痛苦程度(第一狱=1)" align="center" />
                </el-table>
            </div>
        </div>
        <!-- <div class="infernal-work-right">
            <div class="anchor">
                <div class="anchor-item"><a href="#anchor1">地狱简介</a></div>
                <div class="anchor-item"><a href="#anchor2">十八层地狱</a></div>
                <div class="anchor-item"><a href="#anchor3">地狱刑期表</a></div>
            </div>
        </div> -->
    </div>
</template>

<style scoped lang="scss">
.infernal-work {
    padding: 10px 40px 30px;
    display: flex;
    justify-content: space-between;
}
.infernal-work-left {
    flex: 1;
    .title {
        position: relative;
        font-weight: bold;
        font-size: 20px;
        padding-left: 15px;
        margin-top: 40px;
        &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 100%;
            left: 0;
            top: 0;
            background-color: #409EFF;
        }
    }
    .content {
        margin-top: 10px;
        text-indent: 2em;
        line-height: 30px;
        color: #aaa;
    }
    .imgs {
        display: flex;
        justify-content: space-between;
        padding: 20px 0 10px;
    }
    .table {
        padding: 20px 0 10px;
    }
}

.infernal-work-right {
    width: 200px;
    .anchor {
        position: sticky;
        top: 0;
        padding-left: 20px;
        .anchor-item {
            padding: 10px 20px;
            a { 
                color: #fff;
                text-decoration: none;
            }
        }
        
    }
}
</style>